<template>
  <div class="edit-container">
    <el-form
      ref="editForm"
      v-loading="loading"
      :model="editForm"
      :rules="rules"
    >
      <el-form-item prop="title">
        <div class="input-title">文章标题</div>
        <el-input
          ref="title"
          type="text"
          v-model="editForm.title"
          placeholder="请输入标题"
          name="title"
          tabindex="1"
          auto-complete="on"
        />
      </el-form-item>
      <el-form-item prop="intro">
        <div class="input-title">文章介绍</div>
        <el-input
          ref="intro"
          type="text"
          v-model="editForm.intro"
          placeholder="请输入文字介绍"
          name="title"
          tabindex="1"
          auto-complete="on"
        />
      </el-form-item>
      <el-form-item prop="typeid">
        <div class="input-title">文章类型</div>
        <el-select
          ref="typeid"
          v-model="editForm.typeid"
          placeholder="选择类型"
          clearable
        >
          <el-option
            v-for="(item, index) of typeOptions"
            :key="index"
            :value="item.id"
          >
            {{ item.typename }}
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="content">
        <div class="input-title">文章内容</div>
        <div id="e"></div>
      </el-form-item>
      <el-button
        :loading="loading"
        type="primary"
        @click.native.prevent="formSubmit"
        >提交</el-button
      >
      <el-button type="primary" @click.native.prevent="handleBack"
        >返回列表</el-button
      >
    </el-form>
  </div>
</template>

<script>
import E from "wangeditor";
import hljs from "highlight.js";
import { API } from "@/config/config";
import TypeSevice from "@/service/type";
import EssayService from "@/service/essay";

const typeService = new TypeSevice(),
  essayService = new EssayService();

export default {
  name: "EssayEdit",
  data() {
    const validateTitle = (rule, value, callback) => {
      if (!value) {
        callback(new Error("文章标题不允许为空"));
      } else {
        callback();
      }
    };
    const validateType = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请选择文章类型"));
      } else {
        callback();
      }
    };
    const validateIntro = (rule, value, callback) => {
      if (!value) {
        callback(new Error("文章标题不允许为空"));
      } else {
        callback();
      }
    };
    return {
      editForm: {
        title: "",
        typeid: "",
        intro: ""
      },
      editor: new E("#e"),
      rules: {
        title: [{ validator: validateTitle, trigger: "blur" }],
        intro: [{ validator: validateIntro, trigger: "blur" }],
        typeid: [{ validator: validateType, trigger: "blur" }]
      },
      loading: false,
      typeOptions: [],
      origin: ""
    };
  },
  mounted() {
    this.initE();
    this.initSelect();
    this.origin = this.$route.params.origin;
    if (this.origin === "update") {
      let store = this.$store.state.updateInfo;
      this.editForm.title = store.title;
      this.editForm.typeid = store.typeid;
      this.editForm.intro = store.intro;
      this.editor.txt.html(store.content);
    }
  },
  methods: {
    initE() {
      this.editor.highlight = hljs;
      this.editor.config.languageType = [
        "JavaScript",
        "C#",
        "CSS",
        "Java",
        "JSON",
        "TypeScript",
        "Html",
        "SQL",
        "Markdown",
        "PHP",
        "Python"
      ];
      this.editor.config.uploadImgServer = API.ESSAY.ESSAY_UPLOAD_IMAGE;
      this.editor.config.uploadImgMaxSize = 10 * 1024 * 1024;
      this.editor.config.uploadImgMaxLength = 50;
      this.editor.config.withCredentials = true;
      this.editor.create();
    },
    async initSelect() {
      this.typeOptions = await typeService.findType();
    },
    formSubmit() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          this.loading = true;
          let title = this.editForm.title,
            typeid = this.editForm.typeid,
            intro = this.editForm.intro,
            content = this.editor.txt.html();
          if (this.origin === "update") {
            let id = this.$store.state.updateInfo.id;
            essayService.updateEssay({ id, title, typeid, content, intro });
            this.loading = false;
            this.$store.commit("cleatState");
            this.$router.push({ path: "essay" });
            return;
          } else if (this.origin === "create") {
            essayService.createEssay({ title, typeid, content, intro });
            this.editForm.title = "";
            this.editForm.typeid = "";
            this.editForm.intro = "";
            this.editor.txt.html("");
            this.loading = false;
            return;
          }
          this.$message({
            type: "error",
            message: "出现异常,请重新返回列表页！"
          });
        }
      });
    },
    handleBack() {
      this.$store.commit("cleatState");
      this.$router.push({ path: "essay" });
    }
  }
};
</script>

<style lang="scss" scoped>
.edit-container {
  width: 100%;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
  padding: 20px;
  .input-title {
    font-size: 14px;
    font-weight: bold;
  }
}
</style>>

